<style lang='stylus'>
page {
  height: 100%;
}

.header {
  width: 100%;
}

.scroller {
  width: 100%;
  overflow: hidden;
}
.btn-card{
  display :inline-block;
  // width :20%;
  height:60rpx;
  background-color : #ed3f14;
  font-size :36rpx;
  line-height :60rpx;
  color:#fff;
}
.card-bg {
  background: linear-gradient(90deg,#3e87f0, #3e78f5, #3e87f0);
  border 4rpx solid #dcdcdc
}
.price {
  display: flex;
  flex-wrap: wrap;
  height: 300rpx;
  width: 100%;
}

.priceTle {
  width: 100%;
  height: 110rpx;
}

.priceBot {
  width: 60%;
  height: 40rpx;
  float: right;
  line-height: 40rpx;
  font-size: 30rpx;
  background-color: #ff4518;
  color: #fff;
}

.priceBtnSel {
  border: 1rpx solid #fff;
  background-color: #37c1fa;
  color: #fff;
}
</style>
<template>
  <view class="content ft36 flex flex-column bgw">
    <view class="scroller flex1">
   

        <view class="pd20 mg30-x mgt30  radius-16 bgw border-border card-bg ftw "
         >
            <view class="item-header flex flex-between bcardList-bottom pdb20">
              <text class="ftw">IC卡编号:</text>
              
              <text  :class="dlc-success">
                {{ list.cardNo}}</text>
               
            </view>
            <view class="item-body pdt20">
               <view class="cell flex flex-between mgb12">
                <text class="ftw">IC卡状态:</text>
                <text 
                :style="list.isFlag==1?'color:#000':'color:#ff524c'"
                >{{list.isFlag === 1?"正常使用":"禁用中"}}</text>
              </view>   
              
              <view class="cell flex flex-between mgb12">
                <text class="ftw">IC卡归属地:</text>
                <text > {{list.province + list.city }}</text>
              </view>   
					
					<view class="cell flex flex-between mgb12">
					  <text class="ftw">金额:</text>
					  <text >{{list.amount/100+list.givenAmount/100 }}元</text>
					</view>  
<!-- 
                 <view class="cell flex flex-between mgb12">
                <text class="ftw">剩余金额:</text>
                <text >{{list.amount/100 }}元</text>
              </view>        

               <view class="cell flex flex-between mgb12">
                <text class="ftw">赠送金额:</text>
                <text >{{list.givenAmount/100 }}元</text>
              </view> -->   
              
              <!-- <view class="cell flex  mgb12 flex-align-end " 
               v-if="list.isPast===2">
               <button class="btn-card dlc-danger radius-16 " @click="delUserCard(cardList.cardId)">解绑IC卡</button>
              </view> -->
            </view>
        </view>
          <view style="width:100%">
             <i-button  type="primary" shape="circle" size="small" style="width:50%" @tap="toRechargeIcCard">充值IC卡</i-button>
           <i-button  type="warning" shape="circle" size="small" style="width:50%"  @tap="tounBindingIcCard">解绑IC卡</i-button>
          </view>
    </view>
       <i-modal title="是否确认解绑该IC卡？" :visible="visible2" @ok="unbindingIcCard" @cancel="visible2 = false">
    </i-modal>

     <i-modal title="提示" :visible="visible1" :okText="oktxt" @ok="toPay" @cancel="visible1 = false">
      <view class="inner pd40-x pd6-y">请确认充值{{amount/100}}元</view>
    </i-modal>

    <i-message id="message" />
  </view>
</template>

<script>
import { getUserIcCardList,unbindingIcCard,bindingIcCard,rechargeIcCard } from '@/api';
import { parseTime } from '@/utils';
import LoadMore from '@/mixins/LoadMore';
import store from '@/store'
const { $Message } = require('@/wxcomponents/iview/base/index');
export default {
  data () {
    return {
      info:{
        offset:1,
        limit:"20"
        },
      list:[],  
      visible1:false,
      visible2:false,
       "total": 2,
        "size": 10,
        "current": 1,
        "searchCount": true,
        "pages": 1
    }
  },
  methods: {
    tounBindingIcCard(){
     this.visible2=true
    },
    async unbindingIcCard(){
        if(this.list.cardId){
          //调用服务器接口
        const {data} = await unbindingIcCard({cardId:this.list.cardId})
        if(data.code==1){
          $Message({
            content: '解绑成功',
            type: 'success',
            })
            setTimeout(()=>{
             uni.redirectTo({
                url:"/pagesA/ICCard/ICCardList",
              })
            },2000)
        }else{
          // $Message({
          //   content: '解绑失败，请联系后台工作人员',
          //   type: 'error',
          //   duration: 2
          //   })
            setTimeout(()=>{
            uni.redirectTo({
                url:"/pagesA/ICCard/ICCardList",
              })
            },2000)
        }}},
    // 
     toRechargeIcCard(){
     uni.navigateTo({
       url:`/pagesA/ICCard/ICCardRearge?cardNo=${this.list.cardNo}`
     })     
     }, 
  },
  onLoad(option) {
	  console.log(option,'????????')
  if(option){
   this.list = JSON.parse(option.id)
   console.log(this.list,'this.list')
  } 
  },
  onShow(){
    
  }
}
</script>

